<template>
  <div
    class="Page"
    data-moveaim
    :id="attrs.id"
    :key="attrs.id"
    :class="[status, attrs.active ? 'active' : '']"
    :style="pageStyle"
    @click.stop="activeWindow"
  >
    <div class="relative hp100 wp100 radius">
      <div
        class="Header flexMode vc backdrop"
        @dblclick="toggleDiy"
        @contextmenu.prevent="showRmenuHeader"
      >
        <div class="p10 flexMode vc abs z2">
          <div class="flexMode vc">
            <Icon :meta="app.meta" />
            <div class="flexMode vc pl5" v-html="app.meta.label"></div>
          </div>
          <div
            v-if="app.meta.type"
            class="pagePath flexMode vc ml20 bg-dark1 fs12"
          >
            <div class="p5 pathIcon">
              <Icon meta="folder" class="fs12" />
            </div>
            <div v-for="(it, i) in nav" :key="i" class="flexMode vc">
              <div
                v-if="it.meta"
                class="hover-white2 p5 navTxt"
                @click="changeNav(it, i)"
                v-html="it.meta.label"
              ></div>
              <i v-if="i !== nav.length - 1" class="win win-arrow-right fs12" />
            </div>
          </div>
        </div>
        <div class="p10 flexMode vc abs z2 r t">
          <template v-for="(it, i) in headerRmenu">
            <div
              v-if="!it.disable && it.label !== '关闭'"
              :key="i"
              class="p5-10 point"
              :class="[it.hover]"
              :title="it.label"
              @click.stop="it.cb"
            >
              <i :class="it.icon" />
            </div>
          </template>
          <div class="p5-10 point hover-red" @click.stop="closeWindow">
            <i class="win win-close" />
          </div>
        </div>
        <div v-if="status === 'full'" class="dragStop abs l t wp100 hp100 z1" />
        <div
          class="dragArea hp100 wp100"
          v-drag="{ status, cb: r => toMoveWindow(r) }"
        />
      </div>
      <div class="Body" @contextmenu.stop.prevent="showRmenuBody">
        <el-scrollbar class="yscrollbar">
          <component ref="cpt" :is="cpt" :app="app" :nav="c_nav" />
        </el-scrollbar>
        <div
          v-if="app.meta.type === 'folder'"
          class="bodyFooter flexMode hb vc fs12 p10"
        >
          <div class="flexMode vc">
            <span>{{ currentNavLength }}个项目</span>
          </div>
          <div class="bfTool flexMode vc txt-dark5">
            <div
              v-for="(it, i) in viewModeOptions"
              :key="i"
              class="p5 point"
              :class="viewMode === it.icon ? 'txt-blue' : ''"
              :title="it.label"
              @click="toChangeViewMode(it)"
            >
              <i class="win" :class="['win-view-' + it.icon]" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  name: "Page",
  props: {
    app: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    attrs() {
      return this.app.attrs
    },
    nav() {
      return this.app.nav
    },
    status() {
      return this.attrs.status
    },
    pageStyle() {
      const attrs = this.attrs,
        zIndex = attrs.z,
        offset = attrs[this.status]
      return {
        zIndex,
        ...offset,
      }
    },
    headerRmenu() {
      const status = this.status
      let headerRmenuMap = this.$deepCopy(this.headerRmenuMap)
      for (let i = 0; i < headerRmenuMap.length - 1; i++) {
        if (headerRmenuMap[i].status === status) {
          headerRmenuMap[i].disable = true
          break
        }
      }
      return headerRmenuMap
    },
    viewMode() {
      return this.attrs.viewMode
    },
    cpt() {
      const { meta, component, children = [] } = this.app,
        { type } = meta
      if (type === "folder" || children.length) {
        return "Layout"
      } else {
        return component
      }
    },
    currentNavLength() {
      let nav = this.nav,
        lastNav = nav[nav.length - 1]
      return lastNav.children ? lastNav.children.length : 0
    },
  },
  data() {
    return {
      headerRmenuMap: [],
      pathIndex: 0, //路径索引
      c_nav: {}, //当前nav
      viewModeOptions: [
        {
          label: "列表视图",
          icon: "list",
        },
        {
          label: "缩略视图",
          icon: "thumb",
        },
      ],
      movePosition: {},
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.initHeaderRmenu()
    },
    initHeaderRmenu() {
      const that = this
      this.headerRmenuMap = [
        {
          icon: "win win-mini",
          type: "single",
          status: "mini",
          label: "最小化",
          hover: "hover-01",
          cb() {
            that.hideWindow()
          },
        },
        {
          icon: "win win-diy",
          type: "single",
          status: "diy",
          label: "还原",
          hover: "hover-01",
          cb() {
            that.diyWindow()
          },
        },
        {
          icon: "win win-full",
          type: "single",
          status: "full",
          label: "最大化",
          hover: "hover-01",
          cb() {
            that.fullWindow()
          },
        },
        {
          icon: "win win-close",
          type: "single",
          label: "关闭",
          hover: "hover-red",
          cb() {
            that.closeWindow()
          },
        },
      ]
    },
    changeNav(it, i) {
      this.c_nav = it
      this.$store.dispatch("desk/changeNav", { app: this.app, i })
    },
    toChangeViewMode(it) {
      this.$store.dispatch("desk/changeViewMode", { app: this.app, it })
    },
    hideWindow() {
      this.$store.dispatch("desk/hideWindow", this.app)
    },
    fullWindow() {
      this.$store.dispatch("desk/fullWindow", this.app)
    },
    diyWindow() {
      this.$store.dispatch("desk/diyWindow", this.app)
    },
    toggleStatus(status) {
      this.$el.dataset.moveaim = ""
      const app = this.app
      this.$store.dispatch("desk/changeWindow", { app, status })
    },
    toMoveWindow(style) {
      this.$store.dispatch("desk/moveWindow", {
        app: this.app,
        style,
      })
    },
    toggleDiy() {
      //双击 在diy和full之间切换
      if (this.status === "diy") {
        this.fullWindow()
      } else if (this.status === "full") {
        this.diyWindow()
      }
    },
    closeWindow() {
      this.$el.dataset.moveaim = ""
      this.$store.dispatch("desk/closeWindow", this.app)
    },
    activeWindow() {
      const app = this.app
      if (app.attrs.active) {
        this.$store.commit("desk/saveRmenu", false)
        return
      }
      this.$store.dispatch("desk/activeWindow", app)
    },
    showRmenuHeader(aim) {
      const btn = this.headerRmenu
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
    showRmenuBody(aim) {
      const that = this
      const btn = [
        {
          label: "属性",
        },
      ]
      this.$store.commit("desk/saveRmenu", { aim, btn })
    },
  },
}
</script>
